<template>
  <el-form
      ref="form"
      class="login_container"
      :model="login"
      status-icon
      :rules="rules"
      label-width="70px"
  >
    <!-- h3要放在里面:只能有一个根,且title也是表单的一部分 -->
    <h3 class="login_title">员工登录</h3>
    <!-- prop对应rules里的键 -->
    <el-form-item label="用户名" prop="userId">
      <el-input v-model="login.userId" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input
          type="password"
          v-model="login.password"
          autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item>
      <el-button
          @click="submit"
          type="primary"
          style="margin-left: 30px; margin-top: 10px"
      >提交
      </el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
import Cookie from "js-cookie";
import http from '@/utils/request';
import md5 from "md5";
//import { getMenu } from '../api/index'
export default {
  data() {
    return {
      // 登陆数据
      login: {
        userId: "",
        password: "",
      },
      tureLogin: {
        userId: "",
        password: "",
      },
      word: "",
      // 校验规则
      rules: {
        userId: [
          {required: "true", message: "请输入用户名", trigger: "blur"},
        ],
        password: [
          {required: "true", message: "输入密码", trigger: "blur"},
        ],
      },
    };
  },
  methods: {
    submit() {
      console.info("用户id为", this.login.userId);
      if (this.login.userId == "") {
        this.$message.error("账号为空");
        return;
      }
      if (this.login.password == "") {
        this.$message.error("密码为空");
        return;
      }
      this.md();
      console.log(this.tureLogin, '登录设置')
      http.post(`/user/login`, this.tureLogin).then(({data}) => {
        window.localStorage.setItem('userId', this.login.userId);
        console.info("用户id设为", this.$UserId);
        if (data.data == null) {
          this.$message.error(data.msg);
          return;
        }
        console.log("接收到的数据为", data);
        window.localStorage.setItem('token', data.data.token);
        console.log("token", window.localStorage.getItem("token"));
        this.$message.success("登录成功")
        this.getMenu(data.data);
      }).catch((error) => {
        console.log(error)
        this.$message.error(error.response.data.msg || '登录失败，请重试'); // 使用this.$message.error()展示错误信息
      });
    },
    md() {
      this.tureLogin.password = md5(this.login.password);
      this.tureLogin.userId = this.login.userId;
    }
    ,
    getMenu(user) {
      // 表单的校验
      this.$refs.form.validate((valid) => {
        console.log(user)
        if (valid) {
          const data = {
            code: 20000,
            data: {
              menu: [
                {
                  path: "/home",
                  name: "home",
                  label: "首页",
                  icon: "s-home",
                  url: "Home.vue",
                },
                {
                  path: "/sth",
                  name: "sth",
                  label: "销售页面",
                  icon: "s-home",
                  url: "sth.vue",
                },
              ],
              token: 1,
              message: "获取成功",
            },
          };
          if (user.level == 1) {
            data.data.menu.push(
                {
                  path: "/product",
                  name: "product",
                  label: "商品管理",
                  icon: "s-goods",
                  url: "Product.vue",
                },
                {
                  path: "/user",
                  name: "user",
                  label: "员工管理",
                  icon: "user",
                  url: "User.vue",
                },
                {
                  path: "/order",
                  name: "order",
                  label: "订单管理",
                  icon: "notebook-1",
                  url: "Order.vue",
                },
                {
                  path: "/category",
                  name: "category",
                  label: "分类管理",
                  icon: "s-unfold",
                  url: "Category.vue",
                },
                {
                  path: "/supplier",
                  name: "supplier",
                  label: "供应商管理",
                  icon: "phone",
                  url: "Supplier.vue",
                },
                {
                  path: "/inventor",
                  name: "inventor",
                  label: "仓储管理",
                  icon: "box",
                  url: "Inventor.vue",
                }
            );
          }
          Cookie.set("token", 1);
          // 设置菜单
          this.$store.commit("setMenu", data.data.menu);
          // 动态添加路由
          this.$store.commit("addMenu", this.$router);
          // 跳转到首页
          this.$router.push("/home");

          // 也可以使用以下方式记录 token 到 Cookie
          // Cookie.set('token', data.data.token);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login_container {
  width: 350px;
  border: 1px solid #eaeaea;

  // 居中
  margin: 180px auto;

  padding: 35px 35px 15px 35px;

  // 让padding在width里面
  box-sizing: border-box;

  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 0 25px #cac6c6;

  .login_title {
    color: #505458;
    // 左右居中
    text-align: center;
    margin-bottom: 40px;
  }

  .el-input {
    width: 198px;
  }
}
</style>
